<template>
  <div class="oven-item">
    <div>
      <span>STAKE</span>
    </div>
    <div class="item">
      <div>{{data.title1}}</div>
      <div>
        <span>{{data.amount1}}</span>
        <span class="icon">
          <img :src="require('../../../../assets/icon/'+'FRIES'+'.png')" />
        </span>
      </div>
    </div>
    <div class="item">
      <div>{{data.title2}}</div>
      <div>
        <span>{{data.amount2}}</span>
        <span class="icon">
          <img :src="require('../../../../assets/icon/'+'USDT'+'.png')" />
        </span>
      </div>
    </div>

    <div class="item">
      <div>
        <a-input v-model="amount"/>
      </div>
      <div class="per-con" >
        <a-radio-group v-model="per" @change="onChangePer">
          <a-radio-button v-for="value in pers" :key="value+''" :value="value*0.01">
            {{value}} %
          </a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <div class="item" style="text-align: center;">
      <a-button block @click="execute">{{data.title}}</a-button>
    </div>
  </div>
</template>


<script>
  import {getIcon, trace} from "../../../../utils/tools"

  export default {
    components: {},
    props: {
      active:Function,
      data:{}
    },
    data() {
      return {
        getIcon:getIcon,
        curTabId:"0",
        amount: "",
        per: "",
        pers: [10, 25, 50, 75, 100],



      };
    },
    methods: {
      onChangePer(e) {
        trace(`checked = ${e.target.value}`, this.per);
        this.amount = this.data.amount1*this.per;
      },

      execute(){
        this.active(this.amount);
      }



    },
    watch: {

    },
    computed: {
    },

    mounted() {
    },
  };
</script>
<style lang="less" scoped>

  ::v-deep .ant-radio-button-wrapper{
    padding: 0 8px;
  }

  .oven-item{
    position: relative;
    width: 478px;
    padding: 30px 72px;
    border: 1px solid black;
    margin: 0 32px;

    .item{
      margin: 1rem 0;

      .icon{
        width: 40px;
        height: 40px;
        margin-left: 12px;
        display: inline-block;

        img{
          width: 100%;
        }
      }


      .per-con {
        text-align: center;
        margin: 2rem 0;
        background: #FFFFFF;
        box-shadow: 0px 0px 0px 1px #EAEAEA;
        border-radius: 35px;
        padding: 10px;

        .ant-radio-group {
          width: 100%;
        }
      }
    }

  }

</style>
